<template>
  <div>
    <div class="to-top-button" @click="toTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-arrow-top2"></use>
      </svg>
    </div>
    <div class="chart1-container" v-loading="loadingChart1">
      <SubTitle title="年度收支统计" mt="5px" mb="5px"/>
      <div class="chart1-option">
        <div>年份</div>
        <el-date-picker
          type="year"
          v-model="chart1_year"
          style="width: 100px;"
          :clearable="false"
          @change="chart1Change"
        />
      </div>
      <div id="chart1"></div>
    </div>
    <div class="chart2-container" v-loading="loadingChart2">
      <SubTitle title="月度收支统计" mt="5px" mb="5px"/>
      <div class="chart2-option">
        <div>月份</div>
        <el-date-picker
          type="month"
          v-model="chart2_month"
          style="width: 100px;"
          :clearable="false"
          @change="chart2Change"
        />
      </div>
      <div id="chart2"></div>
    </div>
    <div class="bottom-tips">已经到底了 :)</div>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts';
  import SubTitle from '@/components/SubTitle.vue';
  import { monthCalculate, yearCalculate } from '@/utils/api'; 
  import { useUserStore } from '@/stores/user';
  import { onMounted, ref, reactive } from 'vue';
  import message from '@/utils/message';

  const current_date = new Date();
  const useUser = useUserStore();
  const toTop = () => { // 返回顶部
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
  };

  let chart1_year = ref(current_date);
  let loadingChart1 = ref(true);
  let myChart1 = null;
  const option1 = reactive({ // 年度收支统计
    tooltip: { trigger: 'item' },
    legend: { data: ['支出', '收入'], },
    xAxis: {
      name: '月份',
      nameLocation: 'middle',
      nameTextStyle: { lineHeight: 30 },
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    },
    yAxis: { name: '金额', },
    series: [
      {
        name: '支出',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
      },
      {
        name: '收入',
        type: 'bar',
        data: [15, 5, 16, 40, 20, 24, 5, 20, 36, 10, 10, 20]
      }
    ],
  });
  const chart1Change = () => {
    getChart1Year();
  };

  let chart2_month = ref(current_date); 
  let loadingChart2 = ref(true);
  let myChart2 = null;
  const option2 = reactive({ // 月度收支统计
    tooltip: { trigger: 'item' },
    legend: {
      orient: 'horizontal',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 0, name: '支出' },
          { value: 0, name: '收入' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
  const chart2Change = () => {
    getChart2Month();
  };

  const getChart1Year = () => {
    loadingChart1.value = true;
    yearCalculate(useUser.userID, chart1_year.value)
      .then(res => {
        console.log("year:", res);
        if(res.data.msg === "成功") {
          let income = [];
          let expense = [];
          res.data.data.forEach((item, idx) => {
            if(idx % 2 === 0)
              income.push(item);
            else
              expense.push(item);
          });
          option1.series[0].data = expense;
          option1.series[1].data = income;
          myChart1.setOption(option1);
          loadingChart1.value = false;
        } else {
          console.warn(err);
          message.warning('获取年度收支数据失败');
        }
      })
      .catch(err => {
        console.warn(err);
        message.warning('获取年度收支数据失败');
      });
  }
  const getChart2Month = () => {
    loadingChart2.value = true;
    monthCalculate(useUser.userID, chart2_month.value)
      .then(res => {
        if(res.data.msg === "成功") {
          option2.series[0].data[1].value = res.data.data[0];
          option2.series[0].data[0].value = res.data.data[1];
          loadingChart2.value = false;
          myChart2.setOption(option2);
        } else {
          console.warn(err);
          message.warning('获取月度收支数据失败');
        }
      })
      .catch(err => {
        console.warn(err);
        message.warning('获取月度收支数据失败');
      });
  }

  onMounted(() => {
    getChart1Year();
    getChart2Month();
    
    myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption(option1);
    myChart2 = echarts.init(document.getElementById('chart2'));
    myChart2.setOption(option2);

    window.addEventListener('resize', () => {
      myChart1.resize();
      myChart2.resize();
    });
  });

</script>

<style lang="scss" scoped>
  .to-top-button{
    position: fixed;
    bottom: 70px;
    right: 18px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 50%;
    box-shadow: 0 0 4px $theme-shadow;
    background-color: white;
    cursor: pointer;
    z-index: 99;
  }
  .bottom-tips{
    width: fit-content;
    line-height: 30px;
    margin: auto;
    margin-top: 20px;
    font-size: 13px;
    color: $theme-shadow;
    user-select: none;
  }
  .to-top-button:hover{
    background-color: $theme-shadow00;
  }
  .chart1-container{
    width: 92%;
    height: 310px;
    padding-top: 10px;
    margin: auto;
    margin-top: 65px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 8px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    .chart1-option{
      margin-left: 15px;
      width: fit-content;
      height: 30px;
      line-height: 30px;
      display: flex;
      div{
        margin-right: 10px;
        font-size: 14px;
        color: grey;
      }
    }
  }
  #chart1{
    width: 95%;
    height: 220px;
    margin: auto;
    margin-top: 15px;
  }
  .chart2-container{
    width: 92%;
    height: 310px;
    padding-top: 10px;
    margin: auto;
    margin-top: 20px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 8px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    .chart2-option{
      margin-left: 15px;
      width: fit-content;
      height: 30px;
      line-height: 30px;
      display: flex;
      div{
        margin-right: 10px;
        font-size: 14px;
        color: grey;
      }
    }
  }
  #chart2{
    width: 95%;
    height: 220px;
    margin: auto;
    margin-top: 15px;
  }
</style>